<template>
    <div id="center">
        <!--横幅  -->
            <div id="banner">
                
                <div id="photo">
                    <a href=""><img src="../assets/lb1.jpg"></a>
                    <a href=""><img src="../assets/lb2.jpg"></a>
                    <a href=""><img src="../assets/lb3.jpeg"></a>
                    <a href=""><img src="../assets/lb4.jpg"></a>
                    <a href=""><img src="../assets/lb5.jpg"></a>
                </div>
            </div>
            <!-- 广告活动 -->
            <div id="adver">
                <table>
                    <tr>
                        <td><a href=""><img src="../assets/pm1.png" class="pm"></a></td>
                        <td><a href=""><img src="../assets/pm2.png" class="pm"></a></td>
                    </tr>
                    <tr>
                        <td><a href=""><img src="../assets/pm3.png" class="pm"></a></td>
                        <td><a href=""><img src="../assets/pm4.png" class="pm"></a></td>
                    </tr>
                    <tr>
                        <td><a href=""><img src="../assets/pm5.png" class="pm"></a></td>
                        <td><a href=""><img src="../assets/pm6.jpg" class="pm"></a></td>
                    </tr>
                </table>
            </div>
            <div id="gallery">
                <p>
                    <b>好书推荐</b>
                </p>
                
                <ul>
                    <li v-for="book in books1" :key="book.isbn">
        <div class="tooltip">
        <span class="hlimg"
              @click="detail(book.isbn)" 
              >
          <img :src="require(`../assets/bookimg/${book.isbn}.jpg`)">
      </span>
      <span class="title">{{book.bookname}}</span>
      <span class="price">￥{{book.price}}</span>
        <span class="tooltiptext">
        <span >作者：{{book.author}} </span>
       
        <span>类型：{{book.type}} </span>
        <span>出版社：{{book.pubfirm}} </span>
            </span>
        </div>
      </li>
                </ul>
            </div>
            <!--底部  -->
            <div id="footer">
              
            </div>
    </div>
</template>
<script>
import {books} from "../data/books";
export default {
    data:function(){
        return{
            books1:[]
        }
    },
    computed:{
        books:() => books,
    },
    mounted:function(){
        this.goodshow()
    },
    methods:{
        detail:function(val){
            this.$router.push({name:'pageshow',params:{isbn:val}})
        },
        goodshow:function(){
            books.filter(item =>{
                if (item.good==1){this.books1.push({...item})}
            })
        }
    },
}
</script>
<style src="../style/main.css" scoped>

</style>


